<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .quotationSearch-header-left {
          position: absolute;
          width: 0.32rem;
          height: 0.6rem;
          position: absolute;
          left: 0.32rem;
          top: 0.12rem;
      }
      .quotationSearch-header-left img {
        width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
      }
      .quotationSearch-header-right {
        position: absolute;
          right: 0.32rem;
          /* height: 0.52rem; */
          top: 0.12rem;
      }
      .quotationSearch-header-right img {
        width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.2rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .quotationSearch-realtimeinfo {
          /* margin:0.3rem 0; */
          padding-top: 0.5rem;
          padding-bottom: 0.8rem;
      }
      .quotationSearch-realtimeinfo-list ul {
          padding: 0;
          margin: 0;
          list-style: none;
      }
      .quotationSearch-realtimeinfo-list ul li:first-child{
          padding-top: 0;
      }
      .quotationSearch-realtimeinfo-list ul li .list-left{
            display: inline-block;
            /* min-height: 2rem; */
      }
      .quotationSearch-realtimeinfo-list ul li .list-right{
          position: absolute;
          right: 0.32rem;
          top: 0.32rem;
          display: inline-block;
          width: 2rem;
          height: 1.64rem;
          /* background:pink; */
      }
      .quotationSearch-realtimeinfo-list ul li .list-right img{
          width: 2rem;
          height: 1.64rem;
      }
      .quotationSearch-realtimeinfo-subexplain span:nth-child(2){
        font-family: PingFangSC-Regular;
        font-size: 0.24rem;
        color: #5F89BA;
        letter-spacing: 0;
        text-align: left;
        line-height: 0.34rem;
      }
      .quotationSearch-shares {
        /* padding: 0 0.32rem; */
          padding-top: 1.1rem;
      }
      .quotationSearch-shares ul {
          list-style: none;
          margin: 0;
          padding: 0;
          padding: 0 0.32rem;
      }
      .quotationSearch-shares ul li .title{
          position: absolute;
          top: 0.14rem;
          bottom: 0.12rem;
          left: 0;
      }
      .quotationSearch-shares ul li .title .title-name{
        width: 3.6rem;
        height: 0.36rem;
        font-size: 0.26rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        /* color: #2C68FF; */
        line-height: 0.36rem;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .quotationSearch-shares ul li .title .title-mark{
        width: 0.3rem;
        height: 0.24rem;
        font-size: 0.2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 0.24rem;
        /* background: #507FF4; */
        margin-right: 0.04rem;
        text-align: center;
      }

      .title-a {
        display: flex;
        align-items: center;
      }

      .quotationSearch-shares ul li .rate{
        position: absolute;
        top: 0.14rem;
        bottom: 0.28rem;
        right: 1.64rem;
        /* width: 1.04rem; */
        height: 0.4rem;
        font-size: 0.28rem;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #16B270;
        line-height: 0.4rem;
        text-align: center;
      }
      .quotationSearch-shares ul li .oprate .nochoose {
        color:#637DDC;
      }
      /*  */
      .quotationSearch-header {
    height: 1.1rem;
    padding: 0.12rem 0.32rem 0.38rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
.quotationSearch-header-right input{
  width: 5rem;
  border-radius: 0.04rem;
  border-radius: 0.04rem;
  padding-left: 0.6rem;
  font-family: PingFangSC-Regular;
  font-size: 0.26rem;
  letter-spacing: 0;
  text-align: left;
  margin-right: 0.3rem;
  line-height: normal;
}
.quotationSearch-realtimeinfo-list ul li{
  padding: 0 0.32rem;
  box-sizing: border-box;
  padding-top: 0.36rem;
  position: relative;
}
.list-left-top {
  width: 4.52rem;
  font-family: PingFangSC-Medium;
  font-size: 0.3rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 0.44rem;
  margin-bottom: 0.42rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.list-left-bottom{
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  letter-spacing: 0;
  text-align: left;
}
.quotationSearch-realtimeinfo-subexplain {
  height: 0.52rem;
  border-radius:0.04rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  line-height: 0.52rem;
  text-align: center;
  height: 0.52rem;
  width: 1.8rem;
}
.quotationSearch-realtimeinfo-subexplain span:nth-child(1){
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 0.34rem;
}
.quotationSearch-realtimeinfo-seeAll {
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  letter-spacing: 0;
  height: 0.6rem;
  line-height: 0.6rem;
}
.quotationSearch-shares ul li{
  height: 0.96rem;
  position: relative;
}
.quotationSearch-shares ul li .title .title-num{
  /* width: 0.76rem; */
  height: 0.32rem;
  font-size: 0.22rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 0.32rem;
}
.quotationSearch-shares ul li .rate .count {
  font-size: 0.2rem;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
}
.quotationSearch-shares ul li .oprate {
  position: absolute;
  top: 0.28rem;
  bottom: 0.28rem;
  right: 0;
  width: 1.04rem;
  height: 0.4rem;
  font-size: 0.2rem;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  line-height: 0.4rem;
  text-align: center;
}
.quotationSearch-shares ul li .oprate .yichoose{

}
.quotationSearch-shares-top{
  padding: 0 0.32rem;
  height: 0.76rem;
  line-height: 0.76rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
}

.quotationSearch-header-right input[type="search"]{-webkit-appearance:none;}
   .quotationSearch-header-right [type="search"]::-webkit-search-decoration {
    display: none;
}

  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->

  <!-- 头部 -->
  <div class="quotationSearch-header">
      <div class="quotationSearch-header-left">
          <img src="../../images/allPic/jiantou.png" alt="" onclick="closeWindow()" class="headerimg">
      </div>
      <div class="quotationSearch-header-right">
        <form action="javascript:;" id="searchFrom">
          <img src="../../images/allPic/chaxun.png" alt="">
          <input type="search" placeholder="请输入您感兴趣的内容" id='mainipt'>
          <span onclick="searchList()" style='vertical-align: middle;'>搜索</span>
        </form>
      </div>
  </div>

    <div class="quotationSearch-shares">
        <div class="quotationSearch-shares-top" style='display: none;'>
            <span>行情</span>
        </div>
        <ul>
        </ul>
    </div>
  <!-- 资讯 -->
  <div class="quotationSearch-realtimeinfo">
    <div class="quotationSearch-realtimeinfo-list">
        <ul>
        </ul>
    </div>
    <div class="quotationSearch-realtimeinfo-seeAll" style="display: none;">
        <span onclick="goallzixun()">查看全部资讯</span>
    </div>
  </div>

  <!-- 股票信息 -->
  <!--<div class="quotationSearch-shares">-->
  <!--    <div class="quotationSearch-shares-top" style='display: none;'>-->
  <!--        <span>行情</span>-->
  <!--    </div>-->
  <!--    <ul>-->
  <!--    </ul>-->
  <!--</div>-->

</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let searchWord
  let token
  let data
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {

    //设置深色模式
    if(configColorType === '1'){
      $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
      $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }

    //页面加载获取token用于判断是否可以评论或者点赞
    jsBridge.getData('token').then(res => {
      // console.log(res)
      token = res
    })
    //获取本地得原生股票缓存
    jsBridge.getAllStockAttStatus().then(res => {
      data = res
      // jsBridge.toast(res)
    })


  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {


  }

  function reLoadPage() {
    jsBridge.getData('token').then(res => {
      // console.log(res)
      token = res
    })
    //获取本地得原生股票缓存
    jsBridge.getAllStockAttStatus().then(res => {
      data = res
      // jsBridge.toast(res)
    })
    pageNum = 1
    $('.quotationSearch-realtimeinfo-list ul').empty()
    $('.quotationSearch-shares ul').empty()
    $('.quotationSearch-realtimeinfo-seeAll').hide()
    $('.quotationSearch-shares-top').hide()
    getList({'searchWord':searchWord,'pageNum':1})
    getshares({'searchWord':searchWord,'pageNum': pageNum})
  }
  //节流
  let prev = Date.now()
  function throttle (fn, delay) {
  const now = Date.now()
  if (now - prev > delay) {
      fn()
      prev = Date.now()
  }
}
$('#searchFrom').bind('submit', function () {
    searchList()
  })
  //点击搜索按钮
  function searchList(){
    document.activeElement.blur()
    throttle(() => {
      pageNum = 1
      $('.quotationSearch-realtimeinfo-list ul').empty()
      $('.quotationSearch-shares ul').empty()
      searchWord = $('#mainipt').val().trim()
      if(searchWord){
        getList({'searchWord':searchWord,'pageNum':1})
        getshares({'searchWord':searchWord,'pageNum': pageNum})
      }else{
        jsBridge.toast('搜索内容不能为空...')
      }
    },1000 )
  }
  //获取首页搜索列表
  function getList(params){
    Server.realTimeInfo.getSearchList({'searchWord':params.searchWord,'pageNum':params.pageNum,'pageSize':3}).then(res => {
      console.log(res)
      if(res.code === 0){
        let list = res.list
        if(list.length !== 0){
          list.map((item,index) => {
            let creatTime = item.issuerDttm * 1000
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth() + 1 < 10 ? '0' + (new Date(creatTime).getMonth() + 1) : new Date(creatTime).getMonth() + 1
            let day = new Date(creatTime).getDate() < 10 ? '0' + new Date(creatTime).getDate() : new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours() < 10 ? '0' + new Date(creatTime).getHours() : new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes() < 10 ? '0' + new Date(creatTime).getMinutes() : new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30 * 60 * 1000){
              if(nowTime - creatTime < 1 * 60 * 1000){
                item.issuerDttm = '刚刚'
              }else{
                item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60) + '分钟前'
              }
            }else if(nowTime - creatTime < 24 * 60 * 60 * 1000){
              if(nowTime - creatTime < 60 * 60 * 1000){
                item.issuerDttm = '1小时前'
              }else {
                item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60 / 60) + '小时前'
              }
            }else if(new Date().getDate() - new Date(creatTime).getDate() == 1 && new Date().getMonth() == new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.issuerDttm = '昨天' + hour + ':' + minute
            }else{
              item.issuerDttm = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
            }
          })

          list.map((v,i) => {
            let li =
                    `<li onclick="gozixundetails({'infoId':'${v.infoId}','infoType':'${v.infoType}','funcCode':'${v.funcCode}'})">
                          <div class="list-left">
                              <div class="list-left-top"  style="width:${v.coverImgUrl ? '' : '100%'}">${v.mainTitle}</div>
                              <div class="list-left-bottom" style="width:${v.coverImgUrl ? '' : '100%'}">${v.issuerDttm}</div>
                          </div>
                          <div class="list-right" style="display:${v.coverImgUrl ? 'block' : 'none'}">
                              <img src="${v.coverImgUrl}" alt="">
                          </div>
                          <div class="quotationSearch-realtimeinfo-subexplain">
                              <span>来自：</span><span>${v.infoTypeStr}</span>
                          </div>
                      </li>`

            $('.quotationSearch-realtimeinfo-list ul').append(li)
            $('.quotationSearch-realtimeinfo-seeAll').show()
          })
        }else{
          // jsBridge.toast('暂无数据')
        }
      }
    })
  }
  //点击搜索获取对饮的股票信息
  function getshares(params){
    Server.hqSearch.getRate({'keyWords':params.searchWord,'pageSize':10,'pageNum':params.pageNum,'ticket':'info_pc'}).then(res => {
      console.log(res,'resres')

      if(res.code === 0){

        $('.quotationSearch-shares-top').show()

        res.securitiesInfo.map((v,i) => {
          res.quoteInfo.map((j,k) => {
            if(v.uniqueCode === j.uniqueCode){
              v.dealedRaisePercent = j.dealedRaisePercent || ''
              v.dealedLastPrice = j.dealedLastPrice || ''
            }
          })
        })

        // res.securitiesInfo.forEach((v,i) => {
        //   for(const item of res.quoteInfo){
        //     if(item.uniqueCode == v.uniqueCode){
        //       v.lastPrice = item.lastPrice
        //       v.raisePercent = item.raisePercent*100
        //     }
        //   }
        // })

        if(data){
          res.securitiesInfo.forEach((item,index) => {
            for(const iterator of JSON.parse(data)){
              if(iterator.code == item.uniqueCode){
                item.selected = true
              }
            }
          })
        }

        // jsBridge.toast(JSON.stringify(res.securitiesInfo))

        console.log(res.securitiesInfo, 'res.securitiesInfo')
        res.securitiesInfo.map((item,index) => {
          console.log(item, 'item')
          let li =
                  `<li onclick="gupiaoDetails({'exchange':'${item.uniqueCode.split('-')[0] + '-'}','code':'${item.code}'})">
                    <div class="title">
                        <div><span class="title-name">${item.name}</span></div>
                        <div class="title-a">
                          <span class="title-mark" style="display:${item.uniqueCode.split('-')[0] === 'SZ' ? 'inline-block' : 'none'};background:#568BF9;">${item.uniqueCode.split('-')[0]}</span><span class="title-num" style="display:${item.uniqueCode.split('-')[0] === 'SZ' ? 'inline-block' : 'none'};">${item.code}</span>
                          <span class="title-mark" style="display:${item.uniqueCode.split('-')[0] === 'SH' ? 'inline-block' : 'none'};background:#EF4244;">${item.uniqueCode.split('-')[0]}</span><span class="title-num" style="display:${item.uniqueCode.split('-')[0] === 'SH' ? 'inline-block' : 'none'};">${item.code}</span>
                          <span class="title-mark" style="display:${item.uniqueCode.split('-')[0] === 'HK' ? 'inline-block' : 'none'};background:#764EF4;">${item.uniqueCode.split('-')[0]}</span><span class="title-num" style="display:${item.uniqueCode.split('-')[0] === 'HK' ? 'inline-block' : 'none'};">${item.code}</span>
                          <span class="title-mark" style="display:${item.uniqueCode.split('-')[0] !== 'SZ' && item.uniqueCode.split('-')[0] !== 'SH' && item.uniqueCode.split('-')[0] !== 'HK' ? 'inline-block' : 'none'};color:#999999;width:0.8rem;">${item.uniqueCode.split('-')[0]}</span><span class="title-num" style="display:${item.uniqueCode.split('-')[0] !== 'SZ' && item.uniqueCode.split('-')[0] !== 'SH' && item.uniqueCode.split('-')[0] !== 'HK' ? 'inline-block' : 'none'};">${item.code}</span>
                        </div>
                    </div>
                    <div class="rate">
                        <div><span style="color:${item.dealedRaisePercent ? item.dealedRaisePercent.indexOf('-') ? '#EF4244' : '#16B270' : 'none'}">${item.dealedRaisePercent ? item.dealedRaisePercent : '0.00%'}</span></div>
                        <div class="count"><span>${item.dealedLastPrice ? item.dealedLastPrice : ''}</span></div>
                    </div>
                    <div class='oprate'>
                      <div class="nochoose" style="display:${item.selected === false ? 'block' : 'none'}"  onclick="choose({'stockCode':'${item.uniqueCode}','stockName':'${item.name}'},this)">
                        <span>+自选</span>
                      </div>
                      <div class="yichoose" style="display:${item.selected === true ? 'block' : 'none'}"  onclick="nochoose({'stockCode':'${item.uniqueCode}','stockName':'${item.name}','status':'0'},this)">
                        <span>删自选</span>
                      </div>
                    </div>
                  </li>`

          $('.quotationSearch-shares ul').append(li)
        })
        if(pageNum === 1){
          pageNum++
          getshares({'searchWord':searchWord,'pageNum': pageNum})
        }

      }else{

      }
    })
  }
  //点击某一项去资讯详情页面
  function gozixundetails(params){
    // console.log(params)
    jsBridge.openWindow('/html/details/Information-details.html?infoId=' + params.infoId + '&infoType=' + params.infoType + '&funcCode=' + params.funcCode + '&isopencomment=0',{}, {noBar: false})
  }
  //点击查看全部资讯
  function goallzixun(){
    jsBridge.openWindow('/html/search/globalSearch.html?searchWord=' + searchWord,{}, {noBar: false})
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //点击某一项去股票详情页面
  function gupiaoDetails(params){
    jsBridge.openStock(params.exchange,params.code)
  }
  //点击股票得选择按钮选择对应得股票放入自选栏(增加和删除)
  //新增未登陆可以用本地缓存实现
  function choose(params1,params2){
    event.stopPropagation()
    if(token){
      console.log(params1)
      Server.hqSearch.addRate({'stockCode':params1.stockCode,'stockName':params1.stockName}).then(res => {
        console.log(res,'zengjia')
        if(res.code === 0){
          $(params2).hide().siblings().show()
        }
      })
    }else{
      // jsBridge.openLogin()
      $(params2).hide().siblings().show()
      jsBridge.setStockAttStatus({'code':params1.stockCode,'isAtt':'1'})
    }
  }
  function nochoose(params1,params2){
    event.stopPropagation()
    if(token){
      Server.hqSearch.deleteRate({'stockCode':params1.stockCode,'stockName':params1.stockName,'status':params1.status}).then(res => {
        console.log(res,'jianshao')
        if(res.code === 0){
          $(params2).hide().siblings().show()
        }
      })
    }else{
      // jsBridge.openLogin()
      $(params2).hide().siblings().show()
      jsBridge.setStockAttStatus({'code':params1.stockCode,'isAtt':'2'})
    }
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.quotationSearch-shares ul').offset().top
    let height = $('.quotationSearch-shares ul').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(top+height-maxHeight,'top+height-maxHeight')
    if(Math.round(top + height - maxHeight) === Math.round(scroll) ){
      pageNum++
      getshares({'searchWord':searchWord,'pageNum': pageNum})
    }
  })


</script>
</html>
